<template>
  <!--专辑列表-->
  <div class="album">
    <ul>
      <li>
        <div class="songImg" @click="skipGrabble('albumPage',infoList.id)">
          <img :src="infoList.picUrl" alt />
          <span>{{infoList.name}}</span>
        </div>
        <div class="creator">
          <p @click="skipGrabble('GrabbleType100',infoList.artists[0].id)">{{infoList.artists[0].name}}</p>
        </div>
        <div class="listNumber">
          <p>歌曲数{{infoList.size}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "album",
  props: ["infoList"],
  mounted() {
    //console.log(this.infoList);
  },
  methods: {
    skipGrabble(path, val) {
      this.$router.push({
        name: path,
        query: {
          keyWord: val
        }
      });
    }
  }
};
</script>

<style scoped lang='less'>
.album {
  ul {
    padding: 0;
    li {
      display: flex;
      height: 50px;
      font-family: "Courier New", Courier, monospace;
      div:hover {
        color: #31c27c;
        cursor: pointer;
      }
      .songImg {
        flex: 2;
        img {
          width: 50px;
          height: 50px;
          vertical-align: middle;
        }
        span {
          margin-left: 20px;
        }
      }
      .creator {
        flex: 1;
      }
      .listNumber {
        flex: 1;
        p {
          text-align: center;
        }
      }
    }
  }
}
</style>